<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">{{title}}</div>
    </div>
    <div style="padding: 0.3rem;">
    	<van-cell-group>
    	  <van-field required :disabled="what == 'shenpi' || all.id != ''" v-model="all.khmc" label="客户名称" placeholder="请输入客户名称" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required :disabled="shenpi" v-model="all.dh" label="联系电话" placeholder="请输入联系电话" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required :disabled="shenpi" readonly clickable :value="all.khlx" label="客户类型" placeholder="请选择客户类型" @click="kehuleixinglog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    		<van-field required :disabled="shenpi" readonly clickable :value="all.gjzt" label="跟进状态" placeholder="请选择跟进状态" @click="genjinzhuangtailog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    		<van-field required :disabled="shenpi" readonly clickable :value="all.khly" label="客户来源" placeholder="请选择客户来源" @click="kehulaiyuanlog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required :disabled="shenpi" v-model="all.gsmc" label="公司名称" placeholder="请输入公司名称" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required :disabled="shenpi" readonly clickable :value="all.sshy" label="所属行业" placeholder="请选择所属行业" @click="suoshuhangyelog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required :disabled="shenpi" readonly clickable :value="all.rygm" label="人员规模" placeholder="请选择人员规模" @click="renyuanguimolog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field v-model="all.bz" :disabled="shenpi" label="备注" placeholder="请输入备注" />
    	</van-cell-group>
    	<div @click="zhankai = !zhankai" style="color: #1989fa; margin: 10px 0;" class="flexc">展开更多信息 <van-icon name="arrow-down" style="margin-left: 10px;" /></div>
    	<div v-if="zhankai">
    		<van-cell-group>
    		  <van-field :disabled="shenpi" v-model="all.cz" label="传真" placeholder="请输入传真" />
    		</van-cell-group>
    		<van-cell-group>
    		  <van-field :disabled="shenpi" v-model="all.wz" label="官网" placeholder="请输入官网" />
    		</van-cell-group>
    		<van-cell-group>
    		  <van-field :disabled="shenpi" v-model="all.yb" label="邮编" placeholder="请输入邮编" />
    		</van-cell-group>
    		<van-cell-group>
    		  <van-field :disabled="shenpi" v-model="all.dz" label="详细地址" placeholder="请输入详细地址" />
    		</van-cell-group>
    	</div>
      


      <van-cell-group  v-if="what == 'shenpi'">
        <van-field required v-model="shenpiall.spyj" type="textarea" label="审批意见" placeholder="请输入审批意见" />
      </van-cell-group>

    	<div class="flexcc" style="margin-top: 0.3rem;" v-if="!gonghai && what != 'shenpi'">
    		<van-button type="info" size="small" @click="baocun">保存并提交审核</van-button>
    	</div>

      <div class="flexcc" style="margin-top: 0.3rem;" v-if="gonghai && what != 'shenpi'">
      	<van-button type="info" size="small" @click="gonghaibaocun">保存并提交审核</van-button>
      </div>

      <div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'shenpi'">
      	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="shenpigo(0)">审批通过</van-button>
      	<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="shenpigo(1)">审批不通过</van-button>
      </div>

<!--      <div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'bianji'">
      	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="xiugai()">保存</van-button>
      	<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="back()">返回</van-button>
      </div> -->

    </div>

    <van-popup v-model="kehuleixinglog" position="bottom">
    	<van-picker title="请选择客户类型" show-toolbar :columns="kehuleixing"  @confirm="sexConfirm" @cancel="sexCancel" />
    </van-popup>

    <van-popup v-model="genjinzhuangtailog" position="bottom">
    	<van-picker title="请选择跟进状态" show-toolbar :columns="genjinzhuangtai"  @confirm="genjinConfirm" @cancel="genjinCancel"/>
    </van-popup>

    <van-popup v-model="kehulaiyuanlog" position="bottom">
    	<van-picker title="请选择客户来源" show-toolbar :columns="kehulaiyuan" @confirm="laiyuanConfirm" @cancel="laiyuanCancel" />
    </van-popup>
    <van-popup v-model="renyuanguimolog" position="bottom">
    	<van-picker title="请选择人员规模" show-toolbar :columns="renyuanguimo"  @confirm="guimoConfirm" @cancel="guimoCancel" />
    </van-popup>
    <van-popup v-model="suoshuhangyelog" position="bottom">
    	<van-picker title="请选择所属行业" show-toolbar :columns="suoshuhangye"  @confirm="hangyeConfirm" @cancel="hangyeCancel" />
    </van-popup>

  </div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {

        title:"新建客户",
        what:'add',
        all:{
            "id": "",
            "gsmc": "",
            "dh": "",
            "cz": "",
            "wz": "",
            "dz": "",
            "yb": "",
            "khlx": "",
            "khmc": "",
            "gjzt": "",
            "khly": "",
            "sshy": "",
            "rygm": "",
            "bz": "",
            fzrid:JSON.parse(localStorage.getItem('person')).userid,
        },
         zhankai:false,
         kehuleixing:['重要客户','普通客户','低价值客户'],
         kehuleixinglog:false,
         genjinzhuangtai:['初访','意向','报价','成交','搁置','未成交','无意向','长期服务'],
         genjinzhuangtailog:false,
         kehulaiyuan:['主动拜访','公海','转介绍','展会','网络','其他'],
         kehulaiyuanlog:false,
         suoshuhangye:['金融','服务','事业单位'],
         suoshuhangyelog:false,
         renyuanguimo:['10-20人','20-50人','50-100人','100-500人','500人以上'],
         renyuanguimolog:false,

         shenpiall:{
           khid:"",
           fzrid:"",
           spyj:"",
           spzt:""
         },

         gonghai:false
			}
		},
		created() {


      if(this.$route.query.gonghai){
        this.gonghai = true
      }

      if(this.$route.query.id){
        if(this.$route.query.gonghai){
          this.title = '公海客户编辑'
          axios.get('/OpenCustomer/queryOpencustomerDetail?khid='+this.$route.query.id).then((response)=>{
          	if (response.data.state == 200) {
              this.all = response.data.data
              this.all.fzrid = JSON.parse(localStorage.getItem('person')).userid
          	} else {
              vant.Toast(response.data.msg);
          	}
          })
        }else{
           this.title = '客户编辑'
           axios.get('/Customer/queryCustomerDetail?khid='+this.$route.query.id).then((response)=>{
            if (response.data.state == 200) {
               this.all = response.data.data
            } else {
               vant.Toast(response.data.msg);
            }
         })
        }
      }else{
        if(this.$route.query.gonghai){
          this.what = 'gonghai'
          this.title = '新建公海客户'
        }
      }

      if(this.$route.query.shenpi){
        this.what = 'shenpi'
        this.title = '客户审批'
      }

      console.log(this.what)
		},
		mounted() {

		},
		methods: {
      //新建编辑公海客户
      gonghaibaocun:function(){
        if(this.all.id){
          if(!this.all.gsmc || !this.all.dh || !this.all.khlx || !this.all.khmc || !this.all.gjzt || !this.all.khly || !this.all.sshy || !this.all.rygm || !this.all.fzrid  ){
            vant.Toast('请输出必填项');
            return false
          }
          axios.post('/OpenCustomer/updateOpencustomer',this.all).then((response)=>{
          	if (response.data.state == 200) {
              vant.Toast('编辑公海客户成功');
              this.$emit('refresh-page');
              this.$router.go(-1)
          	} else {
              vant.Toast(response.data.msg);
          	}
          })
        }else{
          if(!this.all.gsmc || !this.all.dh || !this.all.khlx || !this.all.khmc || !this.all.gjzt || !this.all.khly || !this.all.sshy || !this.all.rygm || !this.all.fzrid ){
            vant.Toast('请输出必填项');
            return false
          }
          axios.post('/OpenCustomer/addOpencustomer',this.all).then((response)=>{
          	if (response.data.state == 200) {
              vant.Toast('新建公海客户成功');
              this.$emit('refresh-page');
              this.$router.go(-1)
          	} else {
              vant.Toast(response.data.msg);
          	}
          })
        }

      },
      //新建编辑客户
      baocun:function(){
        if(this.all.id){
          if(!this.all.gsmc || !this.all.dh || !this.all.khlx || !this.all.khmc || !this.all.gjzt || !this.all.khly || !this.all.sshy || !this.all.rygm || !this.all.fzrid  ){
            vant.Toast('请输出必填项');
            return false
          }
          axios.post('/Customer/updateCustomer',this.all).then((response)=>{
            if (response.data.state == 200) {
              vant.Toast('编辑客户成功');
              this.$emit('refresh-page');
              this.$router.go(-1)
            } else {
              vant.Toast(response.data.msg);
            }
          })
        }else{
          if(!this.all.gsmc || !this.all.dh || !this.all.khlx || !this.all.khmc || !this.all.gjzt || !this.all.khly || !this.all.sshy || !this.all.rygm || !this.all.fzrid  ){
            vant.Toast('请输出必填项');
            return false
          }
          axios.post('/Customer/addCustomer',this.all).then((response)=>{
            if (response.data.state == 200) {
              vant.Toast('新建客户成功');
              this.$emit('refresh-page');
              this.$router.go(-1)
            } else {
              vant.Toast(response.data.msg);
            }
          })
        }
      },

      //审批
      shenpigo:function(val){
        this.shenpiall.khid = this.all.id
        this.shenpiall.fzrid = this.all.fzrid
        this.shenpiall.spzt = val
        axios.post('/Process/updateCustomerProcess',this.shenpiall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('审批成功');
            this.$emit('refresh-page');
            this.$router.go(-1)
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      sexConfirm:function(val){
        this.all.khlx = val
      	this.kehuleixinglog = false
      },
      sexCancel:function(val){
        this.kehuleixinglog = false
      },

      genjinConfirm:function(val){
      	this.all.gjzt = val
      	this.genjinzhuangtailog = false
      },
      genjinCancel:function(val){
      	this.genjinzhuangtailog = false
      },

      laiyuanConfirm:function(val){
        this.all.khly = val
        this.kehulaiyuanlog = false
      },
      laiyuanCancel:function(val){
      	this.kehulaiyuanlog = false
      },

      hangyeConfirm:function(val){
      	this.all.sshy = val
      	this.suoshuhangyelog = false
      },
      hangyeCancel:function(val){
      	this.suoshuhangyelog = false
      },

      guimoConfirm:function(val){
      	this.all.rygm = val
      	this.renyuanguimolog = false
      },
      guimoCancel:function(val){
      	this.renyuanguimolog = false
      }
		}
	}
</script>

<style scoped lang="less">


    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }

</style>
